import {
  IconBoxModel,
  IconDatabase,
  IconDownload,
  IconFile,
  IconHome,
  IconPinEnd,
  IconUser,
} from "@tabler/icons-react";
import { FloatingDock } from "../../components/ui/floating-dock";
import { Outlet, useNavigate } from "react-router-dom";
import { useEffect, useRef } from "react";
import { Vortex } from "../../components/ui/vortex";
import {
  Modal,
  ModalContent,
  ModalBody,
  ModalTrigger,
  ModalFooter,
} from "../../components/ui/animated-modal";
import { PlaceholdersAndVanishInput } from "../../components/ui/placeholders-and-vanish-input";
import { useSelector } from "react-redux";
import UserInfo from "../../components/ui/user-info";
export default function HomeLayout() {
  const modal_trigger_ref = useRef();
  const user = useSelector((state) => state.user.user);
  const navigate = useNavigate();
  useEffect(() => {});
  const links = [
    {
      title: "首页",
      icon: (
        <IconHome
          onClick={() => {
            navigate("home");
          }}
          className="h-full w-full  dark:text-neutral-300"
        ></IconHome>
      ),
    },
    {
      title: "模型中心",
      icon: (
        <IconBoxModel
          className="h-full w-full  dark:text-neutral-300"
          onClick={() => {
            navigate("model");
          }}
        ></IconBoxModel>
      ),
    },
    {
      title: "结果列表",
      icon: (
        <IconPinEnd className="h-full w-full  dark:text-neutral-300"></IconPinEnd>
      ),
    },
    {
      title: "数据中心",
      icon: (
        <IconDatabase
          className="h-full w-full  dark:text-neutral-300"
          onClick={() => {
            navigate("data");
          }}
        ></IconDatabase>
      ),
    },
    {
      title: "个人中心",
      icon: (
        <IconUser
          className="w-full h-full  dark:text-neutral-200"
          onClick={() => {
            modal_trigger_ref.current.open();
          }}
        ></IconUser>
      ),
    },
  ];
  useEffect(() => {}, [user]);
  return (
    <>
      <div className="dark w-full h-full">
        <Placeholders></Placeholders>

        <Modal className="absolute">
          <ModalTrigger
            className="absolute w-full h-full block rounded-full"
            ref={modal_trigger_ref}
          ></ModalTrigger>
          <ModalBody className="absolute">
            <ModalContent className="dark:bg-gray-900">
              <UserInfo username={user.username}></UserInfo>
            </ModalContent>
            <ModalFooter className="gap-4 dark:bg-gray-950">
              <button
                onClick={() => {
                  modal_trigger_ref.current.close();
                }}
                className="px-2 py-1 bg-gray-200 text-black dark:bg-black/[0.8] dark:border-black dark:text-white border border-gray-300 rounded-md text-sm w-28"
              >
                关闭
              </button>
              {/* <button className="bg-black text-white dark:bg-white dark:text-black text-sm px-2 py-1 rounded-md border border-black w-28">
              修改手机号
            </button> */}
            </ModalFooter>
          </ModalBody>
        </Modal>
        <div className="w-full h-full overflow-hidden">
          <Vortex
            className="w-[100%] md:h-[100%] h-[100%]"
            backgroundColor="#000000"
          >
            <div className="w-[100%] h-[100%] flex justify-center items-center">
              <Outlet></Outlet>
              <div className="absolute bottom-5">
                <FloatingDock items={links}></FloatingDock>
              </div>
            </div>
          </Vortex>
        </div>
      </div>
    </>
  );
}

export function Placeholders() {
  const placeholders = [
    "SEIR/SIR模型是什么?",
    "该平台可以做什么?",
    "什么是CSV文件?",
  ];

  const handleChange = (e) => {
    console.log(e.target.value);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    console.log("submitted");
  };
  return (
    <div className="w-[50%] absolute top-2 left-[25.5%] flex flex-col justify-center  items-center px-4 z-50">
      <PlaceholdersAndVanishInput
        placeholders={placeholders}
        onChange={handleChange}
        onSubmit={onSubmit}
      />
    </div>
  );
}
